<template>
  <div id="myShopList-max">
    <!-- title -->
    <van-nav-bar
      class="title"
      fixed
      title="我的订单"
      left-arrow
    />
    <!-- 内容 -->
    <div class="box">
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="icon">
            <router-link :to="{path:'/index/ordersDetails',query:{index:item.ordersid}}">
                <van-icon name="arrow" size=".18rem" color="white"  />
              <!--<el-button size="mini" class="btn btn-default" type="success">详情</el-button>-->
            </router-link>
          </div>
          <h3>订单号：{{ item.ordersid }}</h3>
          <p>订单时间：{{ item.paymentTime }}</p>
          <h4>订单价格：{{ item.totalPrice }}</h4>
          <p>支付宝流水号:{{ item.alipayNo }}</p>
          <el-button size="mini" type="success" style="padding-right: -50px" @click="confirm(item.ordersid)">确认收货</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        /*{
          "id": "1",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "2",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "3",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "4",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "5",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "6",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "7",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        },
        {
          "id": "8",
          "time": "2020-06-08",
          "vegetable": "西红柿鸡蛋",
          "price": "3400",
          "restaurant": "四味小馆"
        }*/
      ],
    };
  },
  // 页面加载事件
  created() {
    this.findOrders()
  },
  methods: {
    // 确认收货
    confirm(ordersid){
      this.$http.get("/order/recipt?ordersid=" + ordersid).then(res=>{
        if (res.data.code===2000){
          this.$message.success("确认收货成功");
        }else {
          this.$message.error("确认收货失败");
        }
      })
    },
    // 查看订单详情
    onClickLeft() {
      this.$router.back();
    },
    // 查询已支付的订单详情
    ordersDetails(ordersid) {
      this.$http.get("/order/ordersDetails?ordersid="+ordersid).then(res=>{

      })
    },
    // 查询已支付的订单
    findOrders() {
      // 查询订单信息 132 120 101
      this.$http.get("/order/findOrders").then((res) => {
        this.list = res.data.data;
        console.log(this.list)
      });
    },
  }
}

</script>

<style lang="less">
#myShopList-max {
  .title {
    background-color: #f2473d;
    .van-nav-bar__title,
    .van-nav-bar__text,
    .van-icon-arrow-left {
      color: #fff;
    }
  }
  .box {
    margin: 0.46rem 0;
    padding: 0.2rem 0.1rem;
    background-color: #f9f9f9;
    ul {
      width: 100%;
      li {
        background-color: #f2f2f2;
        padding: 0.15rem;
        margin-bottom: 0.1rem;
        position: relative;
        h3 {
          line-height: 0.3rem;
          font-size: 0.18rem;
          font-weight: 900;
        }
        h4 {
          line-height: 0.25rem;
          font-weight: 700;
          color: red;
        }
        .icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #aaaaaa;
          position: absolute;
          top: 0.5rem;
          right: 0.1rem;
          text-align: center;
        }
      }
    }
  }
}
</style>